<template>
  <div id="app">
    <div>
      <h1>app主页</h1>
    </div>
    <hr />
    <div class="box">
      <h2>动态组件</h2>
      <button @click="comName = 'left'">显示left</button>
      <button @click="comName = 'right'">显示right</button>
      <!-- keep-alive标签不会被销毁 -->
      <!-- include：只缓存某个组件 exclude：排除 -->
      <keep-alive include="left">
        <!-- is属性是绑定标签 -->
        <component :is="comName"></component>
      </keep-alive>
    </div>
    <hr />
    <div class="box">
      <h2>插槽</h2>
      <right>
        <!-- <p>插槽值</p> -->
        <!-- <template v-slot：default> -->
        <!-- 简写 -->
        <template #default>
          <p>指定位置进行插槽</p>
        </template>
      </right>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";

export default {
  data() {
    return {
      // 要展示的组件的名字
      comName: "left",
    };
  },
  components: {
    left: Left,
    right: Right,
  },
};
</script>

<style lang="less" scope>
</style>
